<template>
  <div v-if="show">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <div class="tips">
            <div class="title">分值分析</div>
            <tips :type="$route.query.type - 1" />
          </div>
          <score-interpretation
            :ScoreType="$route.query.value"
            :totalScore="$route.query.totalScore"
          ></score-interpretation>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="always">
          <div class="title">近10天{{$route.query.title}}</div>
          <rz-height></rz-height>
          <div class="food_line"></div>
        </el-card>
      </el-col>
    </el-row>
     <rz-height></rz-height>
    <rz-height></rz-height>
    <table-list :itemType="$route.query.type" :title="$route.query.title"></table-list>
  </div>
</template>
<script>
var echarts = require("echarts");
import { findListByConditionSafety } from "@/api/modules/workstation";
import tips from "@/views/workstationScore/components/tips";
import scoreInterpretation from "@/views/workstationScore/components/scoreInterpretation";
import tableList from "@/views/workstationScore/components/table";
export default {
  created() {
     this.findListByConditionSafety();
  },
  // 页面加载完成
  mounted() {
   

  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      recordList: [],
      show:true,
    };
  },
  // 方法
  methods: {
    lineInit() {
      let chartDom = document.querySelector(".food_line");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },
            type: "line",
            name:this.$route.title,
            data: this.recordList.map((x) => x[this.$route.query.value]).reverse(),
          },
        ],
      };
      myChart.setOption(option);
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        endDate: this.$moment().format("YYYY-MM-DD"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        workstationId: sessionStorage.getItem("workId"),
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
  },
  // 监听属性
  watch: {
    $route:{
      handler(){
          this.show=false
          // this.show=true
          setTimeout(() => {
             this.show=true
                  this.findListByConditionSafety();
          })
      },
      // 深度观察监听
      deep: true
    }
  },
  // 组件
  components: {
    "score-interpretation": scoreInterpretation,
    "table-list": tableList,

    tips,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.tips {
  position: relative;
}
.dialog_titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
}
.food_line {
  height: 210px;
  width: 100%;
}
</style>